<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>demo</title>
</head>
<body>

	<!-- 日期选择组件 -->
    <input id="datetimepicker" size="16" type="text" readonly>
    
    <!-- 模态对话框 -->
	<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
	  模态对话框
	</button>
	
	<!-- 文件上传组件 -->
	<input id="input-id" type="file" class="file" multiple="multiple">
	
	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	        <h4 class="modal-title" id="myModalLabel">标题</h4>
	      </div>
	      <div class="modal-body">
	        ...
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-primary" onclick="updateDialog()">修改</button>
	      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
    
    <!-- 表格 -->
    <table class="table table-striped table-hover table-condensed table-bordered" style="width:1000px;">
    	<tr class="success">
    		<th width="20%">t1</th>
    		<th width="20%">t2</th>
    		<th width="20%">t3</th>
    		<th width="30%">t4</th>
    		<th width="10%">t5</th>
    	</tr>
    	<tr>
    		<td>111</td>
    		<td>111</td>
    		<td>111</td>
    		<td>111</td>
    		<td>
    			<button type="button" class="btn btn-default btn-xs">操作</button>
    		</td>
    	</tr>
    	<tr>
    		<td>111</td>
    		<td>111</td>
    		<td>111</td>
    		<td>111</td>
    		<td>
    			<button type="button" class="btn btn-default btn-xs">操作</button>
    		</td>
    	</tr>
    	<tr>
    		<td>111</td>
    		<td>111</td>
    		<td>111</td>
    		<td>111</td>
    		<td>
    			<button type="button" class="btn btn-default btn-xs">操作</button>
    		</td>
    	</tr>
    </table>
    
    <!-- 表单 -->
    <form>
    	姓名：<input type="text"><br>
    	年龄：<input type="text"><br>
    	描述：<textarea rows="5" cols="100"></textarea><br>
    	<input type="submit" class="btn btn-default" value="修改">
    </form>
    
    <!-- tab -->
	<!-- Nav tabs -->
	<ul class="nav nav-tabs">
	  <li><a href="#home" data-toggle="tab">Home</a></li>
	  <li><a href="#profile" data-toggle="tab">Profile</a></li>
	  <li><a href="#messages" data-toggle="tab">Messages</a></li>
	  <li><a href="#settings" data-toggle="tab">Settings</a></li>
	</ul>
	<!-- Tab panes -->
	<div class="tab-content">
	  <div class="tab-pane active" id="home">111</div>
	  <div class="tab-pane" id="profile">222</div>
	  <div class="tab-pane" id="messages">333</div>
	  <div class="tab-pane" id="settings">444</div>
	</div>
	
	<!-- 折叠组件 -->
	<div class="panel-group" id="accordion">
	  <div class="panel panel-default">
	    <div class="panel-heading">
	      <h4 class="panel-title">
	        <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
	          	活动1
	        </a>
	      </h4>
	    </div>
	    <div id="collapseOne" class="panel-collapse collapse">
	      <div class="panel-body">
	        	活动1
	      </div>
	    </div>
	  </div>
	  <div class="panel panel-default">
	    <div class="panel-heading">
	      <h4 class="panel-title">
	        <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
	          	活动2
	        </a>
	      </h4>
	    </div>
	    <div id="collapseTwo" class="panel-collapse collapse">
	      <div class="panel-body">
	        	活动2
	      </div>
	    </div>
	  </div>
	  <div class="panel panel-default">
	    <div class="panel-heading">
	      <h4 class="panel-title">
	        <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
	          	活动3
	        </a>
	      </h4>
	    </div>
	    <div id="collapseThree" class="panel-collapse collapse">
	      <div class="panel-body">
	        	活动3
	      </div>
	    </div>
	  </div>
	</div>
	
	<!-- JSON格式化显示编辑组件 -->
	<button id="jsonBtn" class="btn btn-default">JSON</button><br>
	<button id="jsonShowBtn" class="btn btn-default">JSON显示</button><br>
	<div><pre id="result"></pre></div>
	<textarea rows="5" cols="100" id="jsonArea"></textarea><br>
	
	<!-- 文本比较组件 -->
	<button id="diffBtn" class="btn btn-default">diff</button><br>
	<div>
	<div style="width:500px;height:200px;border:1px solid #00f;float:left" id="area1">
I am the very model of a modern Major-General,
I've information vegetable, animal, and mineral,
I know the kings of England, and I quote the fights historical,
From Marathon to Waterloo, in order categorical.
	</div>
	<div style="float:left;width:10px;height:200px;"></div>
	<div style="width:500px;height:200px;border:1px solid #00f;float:left" id="area2">
I am the very model of a modern Major-General,
I've information vegetable, animal, and mineral,
I know the kings of England, and I quote the fights historical,
From Marathon to Waterloo, in order categorical.
111
	</div>
	<div style="clear:both;"></div>
	</div>
	<textarea id="patchDiv" rows="5" cols="100"></textarea>

    <script type="text/javascript">
    	function updateDialog(){
    		alert("模态对话框");
    		//$('#myModal').modal('hide');
    		location.reload();
    	}
    	$(document).ready(function(){
    		$('#datetimepicker').datetimepicker({format:'yyyy-mm-dd',minView:2});
    		
    		// initialize with defaults
    		//$("#input-id").fileinput();

    		// with plugin options
    		$("#input-id").fileinput({'previewFileType':'any'});
    		
    		$("#jsonBtn").click(function(){
    			post({
    			servlet:"DemoServlet",
    			operate:"jsonInfo",
    			msg:function(data){
    				var format_str = JsonUti.convertToString(data);
    				alert(format_str);
    				$("#jsonArea").text(format_str);
    				$("#result").html(new JSONFormat(data).toString());
    			}});
    		});
    		$("#jsonShowBtn").click(function(){
    			var json_str = $("#jsonArea").text();
    			var json = $.parseJSON(json_str);
    			alert(json[0] + "," + json[1] + "," + json[2]);
    		});
    		
   			var dmp = new diff_match_patch();
    		$("#diffBtn").click(function(){
    			var text1 = $('#area1').html();
    			var text2 = $('#area2').html();
    			
    			//dmp.Diff_Timeout = 1;
    			//dmp.Diff_EditCost = 4;

    			var diff = dmp.diff_main(text1, text2);

    			dmp.diff_cleanupSemantic(diff);
    			//dmp.diff_cleanupEfficiency(d);
    			
    			var ds = dmp.diff_prettyHtml(diff);
    			$('#area2').html(ds);
    			
    			var patch_list = dmp.patch_make(text1, text2, diff);
    			var patch_text = dmp.patch_toText(patch_list);
    			$("#patchDiv").html(patch_text);
    			
    			var patches = dmp.patch_fromText(patch_text);
    			var results = dmp.patch_apply(patches, text1);
    			alert(results[0]);
    			
    		});
    		
    	});
    </script>
</body>
</html>